<template>
    <div>
        <div class="head" v-show="$store.state.show">
            <div class="head_item">
                <div class="bar_l">
                    <ul>
                        <li @click="isActive = 1" :class="[isActive == 1 ? 'active' : '']"><router-link
                                to="/home">推荐</router-link></li>
                        <li @click="isActive = 2" :class="[isActive == 2 ? 'active' : '']"><a href="#"> 活动</a></li>
                        <li @click="isActive = 3" :class="[isActive == 3 ? 'active' : '']"><router-link to="/preferential"
                                tag="a">优惠</router-link></li>
                        <li @click="isActive = 4" :class="[isActive == 4 ? 'active' : '']"><router-link to="/publishers"
                                tag="a">厂商</router-link>

                        </li>
                        <li @click="isActive = 5" :class="[isActive == 5 ? 'active' : '']"> <router-link to="/periheral"
                                tag="a">周边</router-link>
                        </li>
                    </ul>
                </div>
                <div class="bar_r">
                    <router-link to="/search" tag="a">
                        <a class="search" @click="change" style="display: inline-block;"></a>
                    </router-link>

                    <span class="xiaoxi"></span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

export default {

    data() {
        return {
            isActive: 1,
            isShow: true
        }
    }, methods: {
        change() {
            this.$store.commit('change', false)
        }
    },
    watch: {
        '$store.state.show': function () {
            this.isShow = this.show
        }
    },
}
</script>